<template>
  <!--礼品卡激活页面-->
  <div>
    <p class="banner"><img :src="accountGoods.coverImg | imgPathFilter" alt="" width="100%"></p>
    <p class="tip"><span>恭喜您</span>获赠{{accountGoods.goodsName}}一张</p>
    <p class="jihuo" :class="isclick ? 'on':''" @click="showActivateCode(accountGoods.activateCode) ">{{text}}</p>
    <p class="use">使用方法</p>
    <ul>
      <li>1.关注德人国际微信公众号</li>
      <li>2.注册登录后于“菜单栏—我的—礼品卡激活”页面输入上方激活码激活后即可尊享各项权益</li>
    </ul>
    <p class="zhuyi">激活码是您激活礼品卡的唯一凭证，一旦刮开请务必妥善保管，不要泄露给他人。</p>
    <div v-if="haveRemark">
      <p class="use">备注</p>
      <p class="beizhucontent">{{givevipcard.remark}}</p>
    </div>
    <!--分享文字和箭头-->
    <div @click="showShare=false" v-if="showShare">
      <div class='commodity_screen'></div>
      <div class="share">
        <img src="../../../assets/ico_jt.png" alt="" width="50%">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Toast} from 'we-vue'
  import {shareGiftcard} from '../../../../test/unit/http'
  import {wxApi} from '../../../../test/unit/flyme_weixin'
  import global from '../../../../test/unit/global'
  import handleClipboard from '../../../../test/unit/clipboard'

  export default {
    name: 'jihuo',
    props: {},
    data() {
      return {
        text: '点击刮开激活码',
        isclick: false,
        accountGoods: {},
        givevipcard: {},
        haveRemark: false,
        showShare:true
      };
    },
    methods: {
      getShareGiftcard(params) {
        shareGiftcard(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.accountGoods = res.object.accountGoods;
            this.givevipcard = res.object.givevipcard;
            if (!this.$myUtils.isNull(this.givevipcard.remark)) {
              this.haveRemark = true;
            }
          } else {
            Toast.text(res.info);
          }
        })
      },
      showActivateCode(activateCode) {
        this.isclick = true;
        this.text = activateCode;
        this.copyNumber();
      },
      copyNumber() {
        handleClipboard(this.accountGoods.activateCode, event, () => {
          Toast.text('激活码已经复制在剪贴版')
        }, () => {
          Toast.text('激活码复制失败！')
        })
      }
    },
    created() {
      let accountGoodsId = this.$route.query.accountGoodsId;
      let givevipcardId = this.$route.query.givevipcardId;
      let params = {accountGoodsId: accountGoodsId, givevipcardId: givevipcardId};
      this.getShareGiftcard(params);
      let url = window.location.href;
      let shareUrl = this.$myUtils.initShareUrl(url);
      console.log(shareurl);
      wxApi.init(function () {
        wxApi.updateAppMessageShareData("礼品卡接收", "礼品卡接收", shareUrl, global.ImgBaseURL + '/' + accountGoods.coverImg)
      });
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .commodity_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.4;
    overflow: hidden;
    z-index: 1000;
  }
  .share{
    text-align: right;
    position: absolute;
    top:20px;
    right: 10px;
    color: #fff;
    z-index: 9999;
    p{
      text-align: left;
    }
  }
  .banner{
    background-color: #eee;
    padding:17px 10px 0px;
  }
  .tip{
    padding: 10px 0;
    color: #666;
    font-size: 15px;
    span{
      color: #111;
      font-size: 20px;
      margin-right: 5px;
    }
  }
  .jihuo{
    width: 75%;
    margin:10px auto;
    background: url("../../../assets/jihuobg.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    height: 53px;
    line-height: 53px;
    border-radius: 5px;
  }
  .on{
    background-color: #000;
    background-image: none;
  }
  .use{
    font-size: 20px;
    color: #111;
    text-align: left;
    padding: 10px;
  }
  ul{
    padding: 5px 10px;
    li{
      text-align: left;

      font-size: 15px;
      color: #666;
      line-height: 25px;
    }
  }
  .zhuyi{
    color: #e96773;
    font-size: 13px;
    line-height: 22px;
    text-align: left;
    padding:5px 10px;
  }
  .beizhucontent{
    font-size: 15px;
    color: #666;
    line-height: 25px;
    padding:0 10px 60px;
    text-align: left;
  }
  .offer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed,#61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
